<template>
    <div class="bg">
        <el-card class="form-card">
            <template #header>
                <div class="card-header">
                    <span>注册账户</span>
                </div>
            </template>
            <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model="form.checkPass" show-password />
                </el-form-item>
                <el-form-item label="姓名" prop="fullname">
                    <el-input v-model="form.fullname" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男" />
                        <el-radio label="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机" prop="tel">
                    <el-input v-model="form.tel" type="tel" />
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.isAgree" type="checkbox" label="同意本站用户协议" name="type" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="!form.isAgree" @click="handleSubmit(formRef)">注册</el-button>
                </el-form-item>
            </el-form>
            <el-row class="row-bg" justify="space-between">
                <el-col :span="6">
                    <el-link href="/#/login" type="info">登陆账户</el-link>
                </el-col>
                <el-col :span="6">
                    <el-link type="info">忘记密码？</el-link>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import axios from 'axios';
import { useRouter } from 'vue-router';
import admin from '../api/admin';
import { toUpper } from 'lodash';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
let form = reactive({
    username: '',
    fullname: '',
    password: '',
    checkPass: '',
    tel: '',
    sex: '男',
    isAgree: false,
});


let formRef = ref();
let router = useRouter();
//表单验证规则
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
        return;
    }
    if (!(/\d{3,}/.test(value))) {
        callback(new Error('密码长度至少是3位数字'));
        return
    }
    if (form.checkPass) {
        formRef.value?.validateField('checkPass', () => null);
    }
    callback();
}
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
        return;
    }
    if (value !== form.password) {
        callback(new Error('两次输入密码不一致'));
        return
    }
    callback();
}
//
const validateUsername =  async (rule,value,callback)=>{
    let {status,data,msg} = await admin.check_username({username:form.username});
    if(status){
        callback();
    }else{
        callback(new Error(msg));
    }
}
const rules = reactive({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 30, message: '账户长度要求3-30之间', trigger: 'blur' },
        {validator:validateUsername,trigger:'blur'}
    ],
    password: [
        { validator: validatePass, required: true, trigger: 'blur' },

    ],
    checkPass: [
        { validator: validatePass2, required: true, trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /\d{11}/, message: '请输入11位手机号', trigger: 'blur' },
    ],
    fullname: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 30, message: '姓名至少两个字符', trigger: 'blur' }
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ]
})
function handleSubmit(formEl) {
    formEl.validate(async (valid, fields) => {
        if (valid) {
            let { status, msg, data } = await admin.register({ ...form })
            if (status) {
                ElMessage.success(msg);
                router.push('/login')
            }
        } else {ElMessage.error(msg) }
    })
}
</script>

<style lang="less" scoped>
.bg {
    position: relative;
    min-height: 100vh;
    background: url(../assets/img/register/bg.jpg) top center;
    background-size: cover;

    .form-card {
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        width: 360px;
    }
}
</style>